<template>
    <el-dialog
      :title="title"
      :visible.sync="openDlg"
      v-if="openDlg"
      width="40%"
      append-to-body
      destroy-on-close
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="年份" prop="yearStr">
                <!-- <el-date-picker
                    v-model="form.enrolTime"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年份"
                    @change="yearStrChange"
                    style="width:100%"
                ></el-date-picker> -->
                <el-select style="width:100%" :disabled="dlgType == 'edit'" v-model="form.yearStr" @change="yearStrChange" placeholder="请选择年份">
                  <el-option
                    v-for="item in hasTypes"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="计划名称" prop="planName">
                <el-input v-model.trim="form.planName" placeholder="请输入计划名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-for="(item) in poorStudentTypeArr" :key="item.id">
            <el-form-item 
              :rules="[
                { required: true, message: '请输入'+item.diffName+'名额', trigger: 'blur' }
              ]" 
              :label="item.diffName+'名额'"
              >
                <el-input-number style="width:100%" v-model.number="item.personNum" :min="0" :step="1" step-strictly controls-position="right" :placeholder="`请输入${item.diffName}名额`" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="planTotal">
        <div class="planTotal-left">总计划名额：{{userNum}}人</div>
        <div class="planTotal-right">总计划金额：{{moneyNum}}元</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openDlg = false">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import {
  queryPoorStudentType,
  addPoorStudent,
  getHasPoorStudentType,
  editPoorStudent
 } from "@/api/poorStudent-scholarship/plan.js";
export default {
    name:"poorAdd",
    data () {
        return {
            title: '',
            openDlg: false,
            // 表单参数
            form: {
              yearStr: "",
              planName: "",
              diffTypePersonList: []
            },
            // 表单校验
            rules: {
              yearStr: [
                { required: true, message: '请选择年份', trigger: 'change' }
              ],
              planName: [
                { required: true, message: '请输入计划名称', trigger: 'blur' }
              ]
            },
            userNum: 0,
            moneyNum: 0,
            yearStr: '',
            poorStudentTypeArr:[],
            hasTypes:[],
            dlgType: 'add'
        }
    },
    watch: {
      poorStudentTypeArr:{
        handler(val){
          let _planTotal = 0
          let _planMoneyTotal = 0
          this.poorStudentTypeArr.forEach((item) => {
              _planTotal = _planTotal + Number(item.personNum)
              _planMoneyTotal = _planMoneyTotal + Number(item.personNum) * Number(item.diffMoney)
          })
          this.userNum = _planTotal
          this.moneyNum = _planMoneyTotal
        },
        deep: true,
        immediate: true
      }
    },
    methods:{
        yearStrChange (val) {
          this.yearStr = val
          this.getPoorStudentType()
        },
        getPoorStudentType () {
          queryPoorStudentType({
            yearStr: this.yearStr
          }).then((res) => {
            res.rows.forEach((item) => {
              item.personNum = 0
            })
            this.poorStudentTypeArr = res.rows
          })
        },
        hasPoorStudentType() {
          getHasPoorStudentType().then((res) => {
            this.hasTypes = res
          })
        },
        open (type, rowdata) {
          this.dlgType = type
            if (type == 'add') {
                this.title = '新增'
                this.form = {
                  yearStr: "",
                  planName: "",
                  diffTypePersonList: []
                }
                this.poorStudentTypeArr = []
            } else {
                this.title = '编辑'
                this.poorStudentTypeArr = rowdata.diffTypePersonList.map((item) => {
                  item.id = item.typeId
                  return item
                })
                this.form.id = rowdata.id
                this.form.yearStr = rowdata.yearStr
                this.form.planName = rowdata.planName
                console.log(this.form,rowdata)
            }
            this.hasPoorStudentType()
            this.openDlg = true
        },
        submitForm () {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              for (const index in this.poorStudentTypeArr) {
                if (this.poorStudentTypeArr[index].personNum === undefined || this.poorStudentTypeArr[index].personNum === "" || this.poorStudentTypeArr[index].personNum === null) {
                  this.$modal.msgError("请输入"+ this.poorStudentTypeArr[index].diffName +"名额");
                  return
                }
              }
              if (this.form.id != undefined) {
                this.form.diffTypePersonList = this.poorStudentTypeArr
                editPoorStudent(this.form).then((response) => {
                  this.$modal.msgSuccess("修改成功");
                  this.openDlg = false;
                  this.$emit("onSearch")
                });
              } else {
                console.log(this.form,this.poorStudentTypeArr)
                for (const index in this.poorStudentTypeArr) {
                  this.form.diffTypePersonList.push({
                    typeId: this.poorStudentTypeArr[index].id,
                    personNum: this.poorStudentTypeArr[index].personNum
                  })
                }
                addPoorStudent(this.form).then((response) => {
                  this.$modal.msgSuccess("新增成功");
                  this.openDlg = false;
                  this.$emit("onSearch")
                });
              }
            }
          });
        },
    }

}
</script>

<style lang="scss" scoped>
    .planTotal{
        display: flex;
        font-size: 13px;
        color: #606266;
        &-left{
            margin-left: 30px;
        }
        &-right{
            margin-left: 20px;
        }
    }
</style>